<template>
  <div>
    <a-modal
      v-model:open="visible"
      :mask-closable="false"
      width="55%"
      :style="{ top: '20px' }"
      :footer="null"
    >
      <template #title>
        <a-space>
          <span style="font-size: 20px">
            {{ title }}
          </span>
          <a-tooltip title="刷新">
            <sync-outlined :spin="loading" @click="refreshDate" />
          </a-tooltip>
        </a-space>
      </template>
      <div v-if="visible" v-permission="['base-data:member-account:query']" v-loading="loading">
        <div style="background: #ececec; padding: 15px">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-card>
                <a-statistic
                  :value="memberAccount.effectiveScore"
                  prefix="🎖️"
                  :value-style="{ color: '#3f8600' }"
                  style="margin-right: 50px"
                >
                  <template #title>
                    <a-space>
                      <span style="font-size: 16px; color: #1a1a1a">有效积分</span>
                    </a-space>
                  </template>
                  <template #suffix>
                    <div v-permission="['base-data:member-account:change']">
                      <a-tooltip title="有效积分添加/扣减">
                        <EditOutlined @click="openAccountChangeDialog(1)" />
                      </a-tooltip>
                    </div>
                  </template>
                </a-statistic>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card>
                <a-statistic
                  :value="memberAccount.freezeScore"
                  prefix="🎖️"
                  :value-style="{ color: '#cf1322' }"
                >
                  <template #title>
                    <a-space>
                      <span style="font-size: 16px; color: #1a1a1a">冻结积分</span>
                    </a-space>
                  </template>
                  <template #suffix>
                    <div v-permission="['base-data:member-account:change']">
                      <a-tooltip title="冻结积分添加/扣减">
                        <EditOutlined @click="openAccountChangeDialog(2)" />
                      </a-tooltip>
                    </div>
                  </template>
                </a-statistic>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </div>
      <div style="background: #ececec; padding: 1px">
        <member-account-log ref="accountLog" :member-id="memberId" />
      </div>
    </a-modal>
    <account-change ref="accountChange" :member-id="memberId" @close="refreshDate" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import * as api from '@/api/base-data/member-account';
  import { QueryMemberAccountBo } from '@/api/base-data/member-account/model/queryMemberAccountBo';
  import { SyncOutlined, EditOutlined } from '@ant-design/icons-vue';
  import MemberAccountLog from '@/views/base-data/member-account-log/index.vue';
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  import AccountChange from '@/views/base-data/member-account/account-change.vue';

  // 弹窗是否可见
  const visible = ref(false);
  // 加载中
  const loading = ref(false);
  // 弹窗标题
  const title = ref('账户');
  // 会员积分账户
  const memberAccount = ref<QueryMemberAccountBo>({
    id: '',
    memberId: '',
    member: null,
    effectiveScore: 0,
    freezeScore: 0,
    createTime: '',
    updateTime: '',
  });
  // 会员积分账户日志
  const accountLog = ref();
  // 会员积分账户变更
  const accountChange = ref();

  // 组件参数
  const props = defineProps({
    // 会员ID
    memberId: {
      type: String,
      required: true,
    },
  });

  // 打开弹窗
  const openDialog = () => {
    visible.value = true;
    initMemberAccount();
    loadMemberAccountData();
  };

  // 打开积分编辑
  const openAccountChangeDialog = (changeType: number) => {
    accountChange.value.openDialog(changeType);
  };

  // 初始化会员积分账户
  const initMemberAccount = () => {
    memberAccount.value = {
      id: '',
      memberId: props.memberId,
      member: null,
      effectiveScore: 0,
      freezeScore: 0,
      createTime: '',
      updateTime: '',
    };
  };

  // 加载会员积分账户数据
  const loadMemberAccountData = async () => {
    loading.value = true;
    api
      .getByMemberId(props.memberId)
      .then((data) => {
        memberAccount.value = data;
        title.value = `会员积分账户-${data?.member?.name}(${data?.member?.code})`;
      })
      .finally(() => {
        loading.value = false;
      });
  };

  // 刷新数据
  const refreshDate = () => {
    loadMemberAccountData();
    accountLog.value.search();
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
